<template>
  <el-table :data="tableContent" border style="width: 100%">
    <el-table-column fixed prop="id" label="labelId" width="320">
    </el-table-column>
    <el-table-column prop="name" label="labelName" width="320">
    </el-table-column>
    <el-table-column prop="topic" label="labelTopic" width="320">
    </el-table-column>
    <el-table-column fixed="right" label="操作">
      <template slot-scope="scope">
        <el-button @click="showLabel(scope.row)" type="text" size="medium"
          >查看</el-button
        >
        <el-button @click="deleteLabel(scope.row)" type="text" size="medium"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "LabelTables",
  methods: {
    showLabel(row) {
      console.log(row);
      this.$alert("" + JSON.stringify(row.conditions), "label content", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    deleteLabel(row) {
      console.log("delete" + row);
      this.$alert("" + JSON.stringify(row.conditions), "确认删除label", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
          this.$axios({
            url: "http://127.0.0.1:5002/delete_label",
            method: "get",
            params: { label_id: row.id },
          }).then((res) => {
            console.log(res.data.results);
            console.log(this.input);
          });
        },
      });
    },
  },

  data() {
    return {
      tableData: [
        {
          id: "854321",
          name: "贫困户",
          topic: "反贫预警",
          conditions: [],
        },
        {
          id: "854322",
          name: "预警户",
          topic: "反贫预警",
          conditions: [],
        },
      ],
    };
  },

  props: ["tableContent"],
};
</script>